<template>
  <div style="padding: 45px;">
    <el-form ref="postForm" :model="postForm" :rules="rules">
      <el-form-item label="标题" prop="name" >
        <el-col :span="12">
          <el-input v-model.trim="postForm.name" width="200px"/>
        </el-col>
      </el-form-item>
      <el-form-item label="图片(351*170)" prop="image" >
        <el-col :span="12">
          <UploadNoEditImage :image.sync="postForm.image" :limit="1" />
        </el-col>
      </el-form-item>
      <el-form-item prop="remark" style="margin-bottom: 30px;">
        <Tinymce ref="editor" v-model="postForm.remark" :isProduct="false" :isVideo="true" :height="400" :size=2 />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit" >确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploadNoEditImage from '@/components/UploadImage/noEdit.vue'
import Tinymce from '@/components/Tinymce'
import { newsSave, newsGetById } from '@/api/website'

export default {
  name: "ZcyxArticleSave",
  props: {
    type: {
      default: 1,
      type: Number,
    },
  },
  components: {
    UploadNoEditImage, Tinymce
  },
  data() {
    return {
      postForm: {
        code: '',
        name: '',
        image: '',
        remark: ''
      },
      rules: {
        image: [{ required: true, message: '请选择', trigger: 'blur' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入图文详情', trigger: 'blur' }],
      },
      isEdit: false,
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    init() {
      if (this.type == 1) {
        this.postForm.code = 'aboutZcyx'
      } else if (this.type == 2) {
        this.postForm.code = 'zcyxTeaKnowledge'
      }  else if (this.type == 3) {
        this.postForm.code = 'zcyxFamousMaster'
      }  else if (this.type == 4) {
        this.postForm.code = 'zcyxFamousMountain'
      }  else if (this.type == 5) {
        this.postForm.code = 'zcyxVideo'
      }  else if (this.type == 6) {
        this.postForm.code = 'zcyxManagement'
      }  else if (this.type == 7) {
        this.postForm.code = 'zcyxJudgeExchange'
      }  else if (this.type == 8) {
        this.postForm.code = 'zcyxIndustryInfo'
      }  else if (this.type == 9) {
        this.postForm.code = 'zcyxFamousProduct'
      }

      this.isEdit = this.$route.query && this.$route.query.id && Number(this.$route.query.id) > 0
      if (this.isEdit) {
        this.fetchData(this.$route.query.id)
      }
    },
    fetchData(id) {
      newsGetById(id).then(response => {
        this.postForm = Object.assign({}, response)
        if (this.postForm.remark) {
          this.$refs.editor.setContent(this.postForm.remark)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    submit() {
      this.$refs['postForm'].validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.postForm)
          delete params.createTime
          newsSave(params, this.isEdit).then((res) => {
            // 调用全局挂载的方法,关闭当前标签页
            this.$store.dispatch("tagsView/delView", this.$route);
            
            var path = ""
            if (this.type == 1) {
              path = '/zcyx/zcyxArticleList/aboutZcyx'
            } else if (this.type == 2) {
              path = '/zcyx/zcyxArticleList/teaKnowledge'
            }  else if (this.type == 3) {
              path = '/zcyx/zcyxArticleList/famousMaster'
            }  else if (this.type == 4) {
              path = '/zcyx/zcyxArticleList/famousMountain'
            }  else if (this.type == 5) {
              path = '/zcyx/zcyxArticleList/zcyxVideo'
            }  else if (this.type == 6) {
              path = '/zcyx/zcyxArticleList/articleManagement'
            }  else if (this.type == 7) {
              path = '/zcyx/zcyxArticleList/judgeExchange'
            }  else if (this.type == 8) {
              path = '/zcyx/zcyxArticleList/industryInfo'
            }  else if (this.type == 9) {
              path = '/zcyx/zcyxArticleList/famousProduct'
            }

            this.$router.push({
              path: path,
              query: {
                t: Date.now()
              }
            });
          })
        }
      })
    },
  },
  created() {
    this.init()
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  
</style>